<template>
  <div class="page flex-col">
    <div class="box_1 flex-col">
      <div class="flex-grow">
        <van-nav-bar
          :title="title"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          class="flex-shrink"
        />
        <div class="flex-grow block_1 overflow-y-auto">
          <div class="box_1 flex-col">
            <div class="block_3 flex-row">
              <img
                class="label_1"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPngbfcc42156a889a49048c114b9d8fe6d2a2c24c40c50a63ac6c9132df5684f190.png"
              />
              <div class="text-wrapper_2 flex-col ml-3">
                <span class="text_4">
                  您好，我是您的私人学习顾问，您可以问我关于语文、英语、数学、物理、地理、化学、历史、生物等各学科问题哦!
                </span>
              </div>
            </div>
            <div class="text-wrapper_3 flex-col">
              <span class="text_5">06-02&nbsp;12:34</span>
            </div>
            <div class="block_4 flex-row justify-between">
              <div class="text-wrapper_4 flex-col">
                <span class="text_6">请帮我编写乐高课程教案</span>
              </div>
              <img
                @click="goMy"
                class="label_3"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPngc1b7db8add6323abca68a1f96575853f4ad8af03964c5c35dce9aa244c12746a.png"
              />
            </div>
            <div class="block_5 flex-row">
              <img
                class="label_4"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPng2e7d662244bcb4fbbffa4f6c8ea5548b5a96e3f1440f0745ec193b34f4a7f411.png"
              />
              <div class="text-wrapper_5 flex-col ml-3">
                <span class="paragraph_1">
                  以下是乐高课程教案：
                  <br />
                  第一课：乐高理论基础介绍
                  <br />
                  乐高基础知识的学习，乐高的理论支持方法。
                  <br />
                  第二课：乐高实践课程
                  <br />
                  乐高的搭建基础知识的学习，乐高搭建的100种方法，学习八大方法发挥创造力
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-shrink btn-wrap">
        <div class="block_6 flex-row justify-between align-center">
          <div class="text-wrapper_6 flex-col flex-grow">
            <input class="message-input" type="text" v-model="message" />
          </div>
          <!-- <van-field class="text-wrapper_6 flex-col" v-model="value" placeholder="输入您想问的" /> -->
          <img
            class="label_8 flex-shrink"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng3f7a57a2d7e6441a923782eadccaa944f35f0ca7bd91a9f520924d98be990507.png"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/api.js";
export default {
  data() {
    return {
      constants: {},
      title: "乐高",
      eventUrl: `/api/chat/speak.json?userContent='发送的内容'&aiContent='ai上一次的内容'`,
      message: "",
    };
  },
  created() {
    this.title = this.$route.query.name;
    console.log(this.$route.query);
    this.init();
  },
  methods: {
    init() {
      const isSupportSse = "EventSource" in window;
      if (!isSupportSse) {
        console.log("不支持SSE");
        return;
      }
      const eventSource = new EventSource(this.eventUrl);
      eventSource.onopen = (event) => {
        sse = event.target;
        console.log("打开了SSE");
        this.sendMessage();
      };
      eventSource.onmessage = (event) => {
        let jsonData = JSON.parse(event.data);
        console.log("接受到的数据", jsonData);
        if (jsonData.code === "0000") {
          if (sse) {
            eventSource.close();
          }
          return;
        } else if (jsonData.code === "1001") {
          if (jsonData.result) {
            console.log(jsonData.result);
          }
        } else {
          alert(jsonData.message);
        }
      };
      eventSource.onerror = (event) => {
        console.log("onerror", event);
        console.error("服务异常请重试并联系开发者！");
        event.target.close();
      };
    },
    sendMessage() {
      const messageBody = "假如你是乐高老师";

      if (messageBody === "") {
        console.error("请输入咨询内容。。。。。。");
        return;
      }
      const msg = messageBody + "上一次返回的内容";
      const data = {
        userContent: msg,
        aiContent: "",
      };
      // var j = {
      //   method: "POST",
      //   headers: {
      //     "Content-Type": "text/event-stream",
      //   },
      //   body: JSON.stringify(data),
      // };
      api.sendMessage(data);
    },
    goMy() {
      this.$router.push({
        path: "/my",
      });
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>
<style scoped lang="less" src="./assets/index.response.less" />

<style lang="less" scoped>
.btn-wrap {
  padding: 10px 0;
  border-top: 1px solid #666;
}

.message-input {
  width: 70vw;
  height: 30px;
  background-color: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
}
</style>
